import React from 'react';
import { Button, Modal, Table, Input, Row, Col, Tag } from 'antd';
import { getBindInfo, getClientEmpty } from '@/services/user';
import styles from './index.less';

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      userInfo: null,
      query: {
        current: 1,
        size: 10,
        emptyName: '',
      },
      list: [],
      total: 0,
      dataList: [],
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  infoData = (userInfo) => {
    this.setState({ visible: true, userInfo }, async () => {
      let res = await getBindInfo({ clientEmptyId: userInfo.clientEmptyId });
      console.log(res);
      this.setState({ dataList: res }, () => this.getList())
    })
  }

  getList = async () => {
    const { query } = this.state;
    let res = await getClientEmpty(query);
    console.log(res);
    this.setState({ list: res.records, total: res.total })
  }

  cancelModal = () => {
    this.setState({
      visible: false,
      userInfo: null,
      query: {
        current: 1,
        size: 10,
        emptyName: '',
      },
    })
  }

  save = () => {
    let { dataList } = this.state;
    this.props.setUserList(dataList)
  }

  setSearch = value => {
    let { query } = this.state;
    query.emptyName = value;
    query.current = 1;
    this.setState({ query }, () => this.getList());
  }

  pageByQuery = () => {
    let { query } = this.state;
    query.current = 1;
    this.setState({ query }, () => this.getList());
  }

  onChangePage = page => {
    let { query } = this.state;
    query.current = page;
    this.setState({ query }, () => this.getList());
  }
  queryUser = row => {
    let { dataList } = this.state;
    dataList = [{id: row.id, clientEmptyInfo: `${row.name}-${row.mainDepartment}`}];
    this.setState({ dataList });
  }

  handleClose = (itemData) => {
    let { dataList } = this.state;
    let data = [];
    dataList.forEach(item => {
      if (item.id !== itemData.id) {
        data.push(item);
      }
    });
    this.setState({ dataList: data });
  }

  render() {
    const { visible, list, total, dataList } = this.state;
    const columns = [
      {
        key: 'mainDepartment',
        align: 'center',
        title: '部门',
        dataIndex: 'mainDepartment',
      },
      {
        key: 'name',
        align: 'center',
        title: '员工姓名',
        dataIndex: 'name',
      },
      {
        title: '操作',
        align: 'center',
        render: (text, row) => {
          let ids = dataList.map(item => item.id);
          if (ids.indexOf(row.id) > -1) {
            return (
              <Button type="link" style={{ marginRight: 5 }} disabled>已选择</Button>
            );
          } else {
            return (
              <Button type="link" style={{ marginRight: 5 }} onClick={() => this.queryUser(row)}>选择</Button>
            );
          }
        },
      }
    ];

    return (
      <Modal visible={visible} title={'绑定用户信息'} onCancel={this.cancelModal} width={600} onOk={this.save} destroyOnClose>
        <div style={{ display: 'flex', marginBottom: 20 }}>
          <label>已绑定用户信息：</label>
          <Row>
            {dataList.map((item, index) => {
              return <Col key={index} style={{ margin: "0px 5px 5px 0" }} className={styles.tag}>
                <Tag onClose={() => this.handleClose(item)} closable>{item.clientEmptyInfo}</Tag>
              </Col>
            })}
          </Row>
        </div>
        <div>
          {/* <Input
            placeholder="请输入员工姓名"
            onChange={e => this.query(e.target.value)}
            style={{ width: '220px', marginRight: 16, marginBottom: 20 }}
          /> */}
          {/* <Button type="primary" onClick={this.pageByQuery}>查询</Button> */}
          <Input.Search
            placeholder="请输入登录用户名"
            onSearch={value => this.setSearch(value)}
            style={{ width: '220px', marginBottom: 20 }}
          />
        </div>
        <Table
          columns={columns}
          dataSource={list}
          rowKey="id"
          scroll={{ y: 360 }}
          pagination={{
            // 分页
            total,
            showSizeChanger: true, // 是否显示可以设置几条一页的选项
            showQuickJumper: true,
            onChange: this.onChangePage,
          }}
        />
      </Modal>
    );
  }
}

export default UserList;
